<template>
    <div class="tag">
        <el-tag v-for="(tag,index) in tags" :key="tag.name" @click="clickTag(tag,index)" @close="closeTag(tag,index)"
            :closable="tag.name !== 'home'" :effect="routes.name === tag.name ? 'dark' : 'plain'">{{ tag.label }}
        </el-tag>

    </div>
</template>


<script setup>
import useStore from '@/store/index'
import { useRoute, useRouter } from 'vue-router'
const store = useStore()
const router = useRouter()
const routes = useRoute()
const tags = store.tagList
//点击标签触发事件
const clickTag = (tag) => {
    router.push(tag.name)
}
const closeTag = (tag,index) => {
    store.closeTag(tag)
    if (tag.name !== routes.name) {
        return
    }
    if (index === length) {
        router.push({ name: tags[index - 1].name })
    } else {
        console.log(tags,index);
        router.push({
            name: tags[index].name
        })
    }
}
</script>


<style lang='scss' scoped>
.tag {
    padding: 20px;

    .el-tag {
        margin-left: 15px;
        cursor: pointer; //改变鼠标光标为手指
    }
}
</style>